<template>
  <div>
    <!-- <h1>search</h1> -->
    <form action="/">
      <van-search v-model="value" show-action placeholder="请输入商家或美食名称" @search="onSearch">
        <template #action>
          <div class="tijiao" @click="onSearch(value)">提交</div>
        </template>
      </van-search>
    </form>

    <ul class="list_container">
      <li class="list_li" v-for="(item, index) in list" :key="index" @click="clickAction(index)">
        <span style="width: 40px;height: 40px;display: inline-block;">
          <img :src="'https://elm.cangdu.org/img/'+(item.image_path)" style="width: 40px;height: 40px;">
        </span>
        <span style="width: 150px;height: 100px; display: inline-block;">
          <h3>{{item.name}}</h3>
          <p>月售{{item.recent_order_num}}单</p>
          <p>{{item.float_minimum_order_amount}}元起送/距离{{item.distance}}</p>
        </span>

      </li>
    </ul>
  </div>
</template>
<script>
  import Cookie from "js-cookie";
  export default {
    name: 'search',
    data: function () {
      return {
        value: '',
        geohash: [],
        list: []
      };
    },
    created() {
      // let msite_geohash = this.$route.params.geohash;
      // console.log(msite_geohash);
      // this.geohash = msite_geohash;
      console.log(this.$root.location);
      //https://elm.cangdu.org/img/164ad0b6a3917599.jpg
      // let location = this.$root.location;
      // console.log(location);
      //
    },
    methods: {
      onSearch(value) {
        console.log(value);
        // // https://elm.cangdu.org/v4/restaurants?extras[]=restaurant_activity&geohash=39.12049,117.223901&keyword=s&type=search
        console.log(this.$root.location);
        const request1 = this.axios.get(this.$url + "/v4/restaurants?extras[]=restaurant_activity&geohash=" + this.$root.location + "&keyword=" + this.value + "&type=search")
        this.axios.all([request1]).then(this.axios.spread((res1) => {
          //   //获取地址数据
          this.list = res1.data;
          console.log(this.list);
          console.log(this.list[0].name);
        })).catch(err => console.log(err));
      },
      clickAction(index) {
        console.log(this.list[index]);
        console.log(this.list[index].id);
        Cookie.set("shop_id", index);
        Cookie.set("shopId", this.list[index].id);
        this.$router.push({ name: 'goShopping' });
      }
    },
  };
</script>
<style lang="less" scoped>
  .list_container {
    display: inline-block;
    width: 100%;
  }

  .list_li {
    width: 100%;
    height: 100px;
    text-align: left;
    padding: 30px 20px;
    background-color: white;
    border-bottom: 2px solid rgb(228, 228, 228);
    border-top: 2px solid rgb(228, 228, 228);
  }

  /deep/.van-field__body {
    /* width: 50px; */
    height: 25px;
    /* no */
    font-size: 25px;
  }

  .tijiao {
    width: 80px;
    /* no */
    height: 25px;
    /* no */
    background-color: rgb(49, 144, 232);
    color: white;
    padding-top: 10px;
    /* no */
    border-radius: 5px;
    /* no */
    font-size: 16px;
    /* no */
    font-weight: bold;
  }
</style>